<template>
      <div class="diff-view">
    	<div id=""  v-for="(diffFile,diffIndex) in diffFiles"  class="file js-file js-details-container Details Details--on open show-inline-notes" :key="diffIndex">
	    	<div class="js-file-content Details-content--hidden">
			    <div class="data highlight js-blob-wrapper " style="overflow-x: auto">
			        <table class="diff-table js-diff-table tab-size  file-diff-split js-file-diff-split" data-tab-size="8" data-diff-anchor="diff-34cbd81ac886ad661a02024bfcc732a9">
			            <colgroup>
			                <col width="52">
			                <col>
			                <col width="52">
			                <col>
			            </colgroup>
                  <tr class="" v-for="(line, index) in diffFile.lines" :key="index">
                    <template v-if="line.isHeader">
                      <td class="blob-num blob-num-expandable" colspan="1">
			                    <a href="#" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="" data-left-range="1-1382" data-right-range="1-1382">
			                        <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
			                            <path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"/>
			                        </svg>
			                    </a>
			                </td>
			                <td class="blob-code blob-code-inner blob-code-hunk" colspan="3">{{line.content}}</td>
                    </template>
                    <template v-else>
                      <td class="blob-num blob-num-context js-linkable-line-number" id="" :data-line-number="line.oldNumber"></td>
			                <td class="code-review blob-code blob-code-context ">
			                    <span v-if="line.oldNumber">{{line.content}}</span>
			                </td>
			                <td class="blob-num blob-num-context js-linkable-line-number" id="" :data-line-number="line.newNumber"></td>
			                <td class="code-review blob-code blob-code-context">
			                    <span v-if="line.newNumber">{{line.context}}</span>
			                </td>
                    </template>
                  </tr>
			        </table>
			    </div>
	    	</div>
    	</div>
      </div>
</template>

<script>

import {Diff2Html} from 'diff2html'

import './diff.scss'
export default {
  name: 'vue-diff-view',
  props: ['data','comments'],
  data(){
    return{
      changes: this.data,
      diffs: [],
      diffComments: this.comments,
      diffJson: {},
      diffFiles: [],
    }
  },
  computed: {
    
  },
  methods: {
    getJsonFromDiff(){
      //this.diffJson=Diff2Html.getJsonFromDiff()
    },
    loadData(){
      console.log("this.data",this.data);
      let tmpDiffJson=Diff2Html.getJsonFromDiff(this.data);

      console.log("tmpDiffJson",tmpDiffJson);
      let diffFile={};
      if(tmpDiffJson&&tmpDiffJson.length>0){
        diffFile.lines=[];
        tmpDiffJson.forEach(element => {
          
          diffFile.addedLines=element.addedLines;
          diffFile.deletedLines=element.deletedLines;
          diffFile.isCombined=element.isCombined;
          diffFile.language=element.language;
          diffFile.newName=element.newName;
          diffFile.oldName=element.oldName;
          diffFile.lines=[];

          element.blocks.forEach(blockEle=>{
            let diffLine={};
            if(blockEle.header){
              diffLine.content=blockEle.header;
              diffLine.isHeader=true;
              diffLine.type='d2h-cnhd';
            }
            diffFile.lines.push(diffLine);

            blockEle.lines.forEach(lineEle=>{
              let diffLine={};
              diffLine.content=lineEle.content;
              diffLine.isHeader=false;
              diffLine.newNumber = lineEle.newNumber;
              diffLine.oldNumber = lineEle.oldNumber;                                                                                              
              diffLine.type=lineEle.type;
              diffFile.lines.push(diffLine);
            })
          })
          this.diffFiles.push(diffFile);
        });

      }

      console.log("diffFiles",this.diffFiles);
      // localStorage.diffJson=this.diffJson;
    }

  },
  mounted(){
    this.loadData();
  }
}
</script>
<style lang="scss" scoped>

</style>

